<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <div class="center-align">
      <svg width="320" height="220" />
    </div>
    <div class="result_title">公司当前 [{{invest_name}}] 模块的风险合规等级</div>
    <div class="result">【{{result}}】</div>
    <van-cell  v-for="item in results" :key="item.id" :title="item.invest_name" :value="item.grade_name"/>
    <h4 style="padding-left:15px;">我们还可以为您提供以下风险模块体验</h4>
    <van-list
      v-model="loading"
      :finished="finished"
    >
     <van-cell icon="comment-o" v-for="item in invests" :key="item.id" :title="item.name" size="large" is-link :to="{name: 'Question', query:{invest_id:item.id} }"/>
    </van-list>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar"
import { get_grade_list, get_invest_list, get_user_invest_list } from '@/api/question'

export default {
  name: "Score",
  components: {
    NavBar
  },
  props: {},
  data() {
    return {
      title: this.$route.meta.title,
      values: [],
      score: +this.$route.query.score,
      invest_name: this.$route.query.name,
      invest_id: +this.$route.query.invest_id,
      grade_data: [],
      invests: [],
      results:[],
      loading: false,
      finished: false,
    };
  },
  computed: {
    result(){
        let item = this.grade_data.find(value => {
          return this.score > value.low_limit_score && this.score <= value.upper_limit_score
        });
        if(item){
          return item.name
        }      
        return "无";
    },
  },
  methods: {
    getGrades(){
      get_grade_list().then( res => {
        this.grade_data = res.data;
        this.showPie();
      }).catch(error => {
          console.log(error.message);
      })
    },
    getResults(){
      const params = {
        openid: localStorage.getItem("openid")
      }
      get_user_invest_list(params).then(res =>{
        // console.log("results:", res);
        this.results = res.data.filter(item => item.invest != this.invest_id);
        // console.log(this.results);
      })
    },
    getInvests(){
        get_invest_list().then(res=>{
          console.log(res.data);
          this.invests = res.data;
          this.loading = false
          this.finished = true
        }).catch(error => {
          if (error.response) {
            console.log(error.response.data);
          } else if (error.request) {
            console.log(error.request);
          } else {
            console.log('Error', error.message);
          }
          console.log(error.config);
        })
    },
    showPie() {
      this.values.push({name: "score", score: this.score})
      this.values.push({name: "totals", score: 100 - this.score})
      var svg = this.$d3.select("svg"),
        width = svg.attr("width"),
        height = svg.attr("height"),
        radius = Math.min(width, height) * 0.35;
        console.log(width);
      var g = svg
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height * 0.4 + ")");

      var color = this.$d3.scaleOrdinal(['#7b9ced', '#e5e5e5']);

      var pie = this.$d3.pie().value(function (d) {
        return d.score;
      });

      var path = this.$d3.arc()
        .outerRadius(radius)
        .innerRadius(radius - 15);

      var arc = g
        .selectAll(".arc")
        .data(pie(this.values))
        .enter()
        .append("g")
        .attr("class", "arc");

      arc.append("path")
        .attr("d", path)
        .attr("fill", function (d, i) {
          return color(i);
        });

      console.log(arc);
      g.append("text")
        .attr("dx", function () {
          return -15;
        })
        .attr("dy", function () {
          return 5;
        })
        .text(this.score + "")
        .style("font-size", "24px")
        .style("fill", "#7b9ced")
        .style("font-weight", "bold");

      let min = this.$d3.min(this.grade_data, d => d.low_limit_score)
      let max = this.$d3.max(this.grade_data, d => d.upper_limit_score)
      console.log(min,max)
      let scale = this.$d3.scaleLinear().domain([0, max]).range([0, width]);

      let g_bottom = svg.append("g").attr("class", "grade").attr("transform", "translate(" + (-16) +"," + (height - 70)  + ")");

      let grade_color = this.$d3.scaleOrdinal([
        '#ec7c70', '#e1a6f8', '#77c9f8','#f7e277','#efbb82'
      ]);
      g_bottom.selectAll("rect")
        .data(this.grade_data)
        .enter()
        .append("rect")
        .attr("x",function(d){
        return scale(d.low_limit_score)
        })
        .attr("y", 30)
        .attr("width",function(d){
          return scale(d.d_value) ;
        })
        .attr("height",10)
        .attr("fill",function(d, i){ return grade_color(i)})

      g_bottom.append("circle")
        .attr("cx", scale(this.values[0].score))
        .attr("cy", 35)
        .attr("r", "8")
        .attr("fill", "white")
        .attr("stroke", "#ec7c70")
        .attr("stroke-width", "3px")

      let g_bottom_text = svg.append("g").attr("transform", "translate(-16 ," + (height - 40)  + ")");
	
      g_bottom_text.selectAll("text")
      .data(this.grade_data)
      .enter()
      .append("text")
      .attr("x",function(d){
        return scale(d.low_limit_score)
      })
      .attr("y", 30)
      .attr("width",function(d){
        return scale(d.d_value);
      })
      .text(d=> d.name ).attr("font-size", "16px")
      .attr("height",20)
      .attr("fill",function(d,i){ return grade_color(i)})
    },
  },
  mounted() {
    this.getGrades();
    this.getResults();
    this.getInvests();
  },
};
</script>

<style  scoped>
  .center-align{
    display: flex;
    align-items: center;
    justify-content:center;
    margin-top:5px;
  }
  .result_title{
    text-align: center;
    margin-top:30px;
    font-size: 16px;
    letter-spacing: 2px;
  }
  .result{
    text-align: center;
    margin-top:20px;
    font-size: 24px;
    color:#ec7c70;
    letter-spacing: 2px;
  }
</style>
